<template>
	<view>
		<scroll-view scroll-y="true" style="height: 700px;" lower-threshold="10" @scrolltolower="addView()">
			<view v-if="flag == true">
				<view
					style="height: 35px;background-color: white;border-radius: 0px 0px 15px 15px;border-top: 0.1px solid gainsboro;">
					<view style="width: 90%;margin-left: 15px;margin-right: 15px;padding-top: 7px;display: flex;">
						<image src="../../static/定向.png" style="width: 12px; height: 12px;margin: 5px;" mode=""></image>
						<view style="font-weight: 400;font-size: 14px;">朝阳区三环到四环之间</view>
					</view>
				</view>
				<view style="width: 100%;background-color: white;margin-top: 10px;" v-for="(item,index) in shopKeeper"
					:key="item.keeperId" v-show="orderList[index].index == item.keeperId">
					<view style="display: flex;">
						<radio value="" style="margin: 10px;" :checked="selectedMerchants[index].shopFig"
							@click="radioColike(index)" />
						<view style="margin-top: 12px;margin-right: 10px;">
							<image src="../../static/dc3f7acfff4a1ee7.png" style="width: 26px;height: 14px;" mode="">
							</image>
						</view>

						<text style="font-size: 14px;margin-top: 12px;">
							{{item.shopKeeperTitle}}
						</text>
						<view style="margin: 9px;">
							<image src="../../static/右箭头.png" style="width: 8px;height: 8px;" mode=""></image>
						</view>

					</view>
					<view style="height: 125px;" v-for="(item1,index1) in shopCartsList" :key="index1"
						v-show="item.keeperId == item1.keeperId">
						<radio value="" style="margin: 10px;float: left;margin-top: 50px;"
							:checked="redioFig[index1].shopFig == 'true'" @click="singleChecked(index1)" />
						<image :src="item1.listGoodsImageUrl" style="width: 100px; height: 100px;border-radius: 5px;"
							mode=""></image>
						<view
							style="width: 200px;height: 15px;overflow: hidden;text-overflow: ellipsis;display: inline-block;-webkit-line-clamp: 1;margin-left: 10px;margin-bottom: 80px;">
							<view style="font-size: 0.75rem;">{{item1.listGoodsTitle}}</view>
						</view>
						<view style="height: 20px;width: 219px;float: right;margin-top: -75px;">
							<view
								style="width: 165px;background-color: #f2f2f2;border-radius: 15px;text-align: center;font-size: 14px;color: gray;">
								{{item1.commodityVariety}}
							</view>
							<view style="text-align: center;
									width: 46px;font-size: 12px;
									height: 15px;margin-top: 5px;border-radius: 5px;color: #e07716;border: 1px solid #e07716;border-radius: 5px;
									">
								7天价保
							</view>
							<view style="display: flex;padding-bottom: 20px;">
								<view>
									<span style="color: orangered;">
										<span style="font-weight: 600;">{{item1.listGoodsSymbol}}</span>
										<span style="font-size: 21px;font-weight: bold;">{{item1.listGoodsPrice}}</span>
										<span>.{{item1.listGoodsDecimal}}</span>
									</span>
								</view>
								<view style="margin-left: 35px;">
									<uni-number-box :value="item1.shopNumber" :min="1"
										@change="change($event,index1)"></uni-number-box>
								</view>
							</view>
							<view style="float: right;font-size: 12px;margin-right: 20px;margin-top: -15px;">
								<span>
									收藏
									<span style="margin-left: 10px;">|</span>
									<span style="margin-left: 10px;" @click="del(item1.shopId)">删除</span>
								</span>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view style="margin-top: 50px; width: 100%;text-align: center; margin-bottom: 50px;" v-if="flag == false">
				<view>
					<image
						src="https://img11.360buyimg.com/jdphoto/s180x180_jfs/t18163/292/540553659/74408/adeb7463/5a93c51cN3bb5e37b.png"
						mode="widthFix" style="height: 90px; width: 90px;"></image>
				</view>
				<p class="empty_txt">购物车空空如也，去逛逛吧~</p>
			</view>
			<view style="text-align: center;margin-top: 10px;">
				<image
					src="https://img12.360buyimg.com/img/s694x148_jfs/t1/171999/12/22113/58222/61bad82eE0dcf6d31/d92d1e829bf953da.png"
					mode="widthFix"></image>
			</view>
			<view style="display: flex;margin: 15px;">
				<view class="line"></view>
				<image src="../../static/菱形-copy-copy.png" mode="" class="img"></image>
				<view style="color: #999;font-size: 14;margin: 0px 5px 0px 5px;">可能你还想要</view>
				<image src="../../static/菱形-copy-copy.png" mode="" class="img"></image>
				<view class="line"></view>
			</view>
			<view class="goods" v-for="(item,index) in goodsList" :key="index"
				@click="navGoods(item.listGoodsId,item.shopKeeperId)">
				<view
					style="width: 160px;float: left;height: 230px;border-radius: 15px 15px 0px 0px;background-color: #fff;margin-top: 10px;margin-left: 15px;">
					<image :src="item.listGoodsImageUrl" style="width: 160px;height: 155px;
			border-radius: 15px 15px 0px 0px;">
					</image>
					<p>{{item.listGoodsTitle}}</p>
					<span style="color: #ff5500;">{{item.listGoodsSymbol}}<span
							style="font-size: 18px;">{{item.listGoodsPrice}}</span>.{{item.listGoodsDecimal}}</span>
				</view>
			</view>
		</scroll-view>
		<view v-if="flag == true">
			<view>
				<view class="goods-carts">
					<radio value="" style="margin-top: 10px;margin-left: 5px;" :checked="selectCheckeds"
						@click="checkAll" />
					<text style="font-size: 14px;">全选</text>
					<view style="float: right;display: flex;margin-top: 10px;">
						<span style="font-size: 12px;">
							已选<span>{{selectCheckedCount}}</span>件，合计：
							<span style="color: orangered;">
								<span style="font-weight: 600;">￥</span>
								<span style="font-size: 21px;font-weight: bold;">{{priceInteger}}</span>
								<span>.{{priceDecimal}}</span>
							</span>
						</span>
						<view class="settle_click" @click="checkOut">
							去结算
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		carts,
		checkOutShop,
		deleteShopId,
		goodsList,
		single,
		userId
	} from '../../apiRequest/news';
	export default {
		data() {
			return {
				redioFig: [],
				goodsList: [],
				pageIndex: 1,
				flag: false,
				shopCartsList: [],
				shopKeeper: [],
				selectedMerchants: [],
				priceCount: 0.00,
				priceDecimal: "",
				priceInteger: "",
				selectCheckedCount: 0,
				selectCheckeds: true,
				orderList: [],
				

			}
		},
		onLoad() {

		},
		onShow() {
			this.goodsOfList();
			console.log(this.$isLogin);
			if (this.$isLogin == true) {
				this.shopCarts();
			} else {
				uni.redirectTo({
					url: '/pages/login/login'
				})
			}
		},
		methods: {
			checkOut(){
				checkOutShop().then(check=>{
					if(check==true){
						uni.showToast({
							title:'支付成功'
						},500);
						this.shopCarts();
					}else{
						uni.showToast({
							title:'支付失败'
						},500);
						uni.showToast({
							title:'余额不足'
						},1000)
					}
				});
			},
			goodsOfList() {
				goodsList(this.pageIndex).then(goodsList => {
					if(goodsList.records != null){
						this.goodsList = [...this.goodsList, ...goodsList.records];
					}
				}).catch(error => {
					console.error(""); // 处理错误
				});
			},
			addView() {
				this.pageIndex++;
				this.goodsOfList();
			},
			navGoods(index, shopKeeperId) {
				if (this.$isLogin == false) {
					uni.redirectTo({
						url: '/pages/login/login'
					})
				} else {
					uni.setStorageSync('keeperId', shopKeeperId);
					uni.navigateTo({
						url: '/pages/index/indexGoods/indexGoods?id=' + index
					});
					this.fig = !this.$isLogin;
				}

			},
			shopCarts() {
				this.orderList = [];
				this.redioFig = [];
				let thia = this;
				carts().then(carts => {
					thia.shopCartsList = carts.shoppingCarts;
					thia.shopKeeper = carts.shopKeeper;
					thia.shopCartsList.forEach((item1, index) => {
						thia.redioFig.push({
							"id": item1.shopId,
							"index": item1.keeperId,
							"shopFig": item1.shopFig,
							"shopNumber": item1.shopNumber,
							"listGoodsPrice": item1.listGoodsPrice,
							"listGoodsDecimal": item1.listGoodsDecimal
						});
					});
					userId().then(usrId=>{
						thia.shopCartsList.forEach((item1, index1) => {
							thia.shopKeeper.forEach((item, index) => {
								if (item.keeperId == item1.keeperId && usrId == item1.usrId) {
									// 使用 Set 来存储索引，提高查找效率
									let indexSet = new Set(thia.orderList.map(order => order
										.index));

									// 检查 Set 中是否已存在该索引
									if (!indexSet.has(item.keeperId)) {
										thia.orderList.push({
											"index": item.keeperId
										});
										indexSet.add(item.keeperId); // 更新 Set
									}
								}
							})
						})
					})
					if (thia.redioFig.length == 0) {
						thia.flag = false;
					} else {
						thia.flag = true;
					}
					thia.selectChecked();
				})

			},
			singleChecked(index) {
				this.$nextTick(() => {
					// 直接使用字符串 'true' 或 'false' 来切换
					this.redioFig[index].shopFig = this.redioFig[index].shopFig === 'true' ? 'false' : 'true';
					single(this.redioFig[index].id, this.redioFig[index].shopFig, this.redioFig[index].shopNumber);
					this.selectChecked();
				});
			},
			selectChecked() {
				this.priceCount = 0;
				var checkeds = 0;
				var count = 0;
				this.shopKeeper.forEach((item, index) => {
					let filteredItems = [];
					let filteredIndex = [];
					for (var i = 0; i < this.redioFig.length; i++) {
						if (this.redioFig[i].index == item.keeperId) {
							filteredIndex.push(item.keeperId);
							if (this.redioFig[i].shopFig === 'true') {
								filteredItems.push(item.keeperId);
								count++;
								var num = this.redioFig[i].listGoodsPrice + '.' + this.redioFig[i]
									.listGoodsDecimal;
								var numValue = parseInt(this.redioFig[i].shopNumber);
								var priceNum = parseFloat(num);
								if (!isNaN(priceNum)) {
									this.priceCount += priceNum * numValue;
								}
							}
						}
					}
					// 截取整数部分
					let integerPart = Math.floor(this.priceCount);

					// 截取小数部分
					let decimalPart = this.priceCount - integerPart;
					// 将小数部分转换为字符串并去除小数点
					let extractedDecimalPart = (decimalPart * 100).toFixed(2);
					let inter = parseInt(extractedDecimalPart);
					let twoDigitNumber = inter < 10 ? `0${inter}` : inter.toString();
					this.priceInteger = integerPart;
					this.priceDecimal = twoDigitNumber;
					this.selectedMerchants[index] = {
						"index": item.keeperId,
						"shopFig": filteredItems.length == filteredIndex.length
					}


				});
				this.selectedMerchants.forEach((item, index) => {
					if (this.selectedMerchants[index].shopFig == true) {
						checkeds++;
					}
				})
				this.selectCheckeds = this.selectedMerchants.length === checkeds;
				this.selectCheckedCount = count;
			},
			change(value, index) {
				this.redioFig[index].shopFig = 'true'
				single(this.redioFig[index].id, this.redioFig[index].shopFig, value);
				this.shopCarts();
				this.selectChecked();
			},
			checkAll() {
				this.selectCheckeds = this.selectCheckeds === true ? false : true;
				this.selectedMerchants.forEach((item, index) => {
					this.selectedMerchants[index].shopFig = this.selectCheckeds;
				});
				this.redioFig.forEach((item, index) => {
					this.redioFig[index].shopFig = "" + this.selectCheckeds + "";
					single(this.redioFig[index].id, this.redioFig[index].shopFig, this.redioFig[index]
						.shopNumber);
				});
				this.priceCount = 0;
				var checkeds = 0;
				var count = 0;
				this.shopKeeper.forEach((item, index) => {
					let filteredItems = [];
					let filteredIndex = [];
					for (var i = 0; i < this.redioFig.length; i++) {
						if (this.redioFig[i].index == item.keeperId) {
							filteredIndex.push(item.keeperId);
							if (this.redioFig[i].shopFig === 'true') {
								filteredItems.push(item.keeperId);
								count++;
								var num = this.redioFig[i].listGoodsPrice + '.' + this.redioFig[i]
									.listGoodsDecimal;
								var numValue = parseInt(this.redioFig[i].shopNumber);
								var priceNum = parseFloat(num);
								if (!isNaN(priceNum)) {
									this.priceCount += priceNum * numValue;
								}
							}
						}
					}
					// 截取整数部分
					let integerPart = Math.floor(this.priceCount);

					// 截取小数部分
					let decimalPart = this.priceCount - integerPart;
					// 将小数部分转换为字符串并去除小数点
					let extractedDecimalPart = (decimalPart * 100).toFixed(2);
					let inter = parseInt(extractedDecimalPart);
					let twoDigitNumber = inter < 10 ? `0${inter}` : inter.toString();
					this.priceInteger = integerPart;
					this.priceDecimal = twoDigitNumber;
					this.selectedMerchants[index] = {
						"index": item.keeperId,
						"shopFig": filteredItems.length == filteredIndex.length
					}
				});
				this.selectCheckedCount = count;
			},
			radioColike(rowCount) {
				this.selectedMerchants[rowCount].shopFig = this.selectedMerchants[rowCount].shopFig === true ? false :
					true;
				this.redioFig.forEach((item, index) => {
					if (item.index == this.selectedMerchants[rowCount].index) {
						this.redioFig[index].shopFig = "" + this.selectedMerchants[rowCount].shopFig + "";
					}
				})
				this.selectChecked();
			},
			del(shopId) {
				deleteShopId(shopId);
				this.shopCarts();
			}
		}
	}
</script>

<style>
	.settle_click {
		width: 113px;
		height: 38px;
		border-radius: 19px;
		margin-top: -5px;
		text-align: center;
		line-height: 38px;
		background-color: #f2270c;
		color: white;
		font-weight: bold;
		margin-left: 15px;
	}

	.goods-carts {
		line-height: 25px;
		align-content: center;
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0px;
		height: 50px;
		background-color: white;
		opacity: 0.9;
		z-index: 9999;
	}

	.empty_txt {
		color: #333;
		font-size: 16px;
		line-height: 16px;
		margin-top: 15px;
	}

	.line {
		margin-top: 10px;
		-webkit-box-flex: 1;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
		height: 0.05rem;
		background-color: #ccc;
	}

	.img {
		width: 10px;
		height: 10px;
		margin-top: 6px;
	}

	p {
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.goods {
		margin-top: 10px;
		margin-right: 20px;
	}
</style>